<!--
 * @Description: 动态
 * @Author: liu (1427179517@qq.com)
 * @Date: 2023-04-23 14:35:17
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-15 10:09:26
 * @FilePath: \jiekuan-app\src\pages\trends\trends.vue
-->

<template>
  <div class="page">
    <div class="page-header" id="header">
      <div class="u-flex u-col-center u-row-between top">
        <u-tabs
          :list="tabsList"
          class="tabs"
          :is-scroll="false"
          bg-color="transparent"
          inactive-color="#fff"
          bar-height="3"
          font-size="35"
          bold
          active-color="#FFB159"
          :current="current"
          @change="handleTabsChange"
        ></u-tabs>
        <image
          src="../../static/images/send_updates.png"
          class="send_updates_icon u-m-l-18 flex-shrink"
          alt=""
          @click.stop="handleClick({ type: 'release' })"
        />
      </div>
    </div>
    <div class="page-content u-p-0">
      <scroll-view scroll-y="true" class="" style="height: 100%;" @scrolltolower="handleScroll">
        <template v-if="listData && listData.length">
          <div
            class="item u-flex u-m-t-30"
            v-for="(item, index) in listData"
            :key="item.contentId"
            @click="handleClick({ type: 'personal', item: item })"
          >
            <image src="" class="avatar u-m-r-15" alt="" />
            <div class="item_right">
              <div class="u-flex u-col-center u-row-between flex-1">
                <div class="u-flex u-col-center">
                  <span class="name">{{ item.userName }}</span>
                  <image src="../../static/images/star_vip.png" v-if="item.memberLevelId" class="vip u-m-l-20" alt="" />
                  <div class="tags u-flex u-col-center u-p-l-6 u-m-l-20" v-if="item.authTags && item.authTags.length">
                    <image src="../../static/images/verify.png" class="icon" alt="" />
                    <span class="u-m-l-6">真人认证</span>
                  </div>
                  <div class="tags u-flex u-col-center u-p-l-6 u-m-l-20" v-if="item.imgs && item.imgs.length">
                    <image src="../../static/images/play.png" class="icon" alt="" />
                    <span class="u-m-l-6">视频相册</span>
                  </div>
                </div>
                <div class="time">{{ item.updates }}</div>
              </div>
              <div class="age u-m-t-26" v-if="item.gender || item.age">
                {{ item.gender ? '女' : '男' }}·{{ item.age ? item.age + '岁' : '' }}
              </div>
              <div class="information u-m-t-30">{{ item.contentText }}</div>
              <div class="flex u-m-t-20" v-if="item.imgList && item.imgList.length">
                <image :src="item2" class="imgs" v-for="item2 in item.imgList" alt="" :key="item2" />
              </div>
              <div
                class="u-flex u-col-center u-row-between"
                :class="item.imgList && item.imgList.length ? 'u-m-t-10' : 'u-m-t-30'"
              >
                <div class="u-flex u-col-center address">
                  <image src="../../static/images/location2.png" class="location2 u-m-r-10" alt="" />
                  <span>{{ item.detailLocation }}</span
                  ><span v-if="item.detailLocation && item.distances">· </span
                  ><span v-if="item.distances">{{ item.distances }}</span>
                </div>
                <div class="u-flex u-col-center other">
                  <div
                    class="u-flex u-col-center"
                    @click.stop="handleClick({ type: 'attention', item: item, index: index })"
                  >
                    <image
                      :src="
                        item.likeFlag ? '../../static/images/attention.png' : '../../static/images/no_attention.png'
                      "
                      class="attention_icon u-m-r-12"
                      alt=""
                    />
                    <span>{{ item.likeCounts }}</span>
                  </div>
                  <div class="u-flex u-col-center u-m-l-54" @click.stop="handleClick({ type: 'chat' ,item : item})">
                    <image :src="'../../static/images/say_hello.png'" class="say_hello_icon u-m-r-12" alt="" />
                    <span>打招呼</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <u-empty mode="list" class="u-empty"></u-empty>
        </template>
      </scroll-view>
    </div>
    <div class="page-footer" id="footer"><customizeTabbar></customizeTabbar></div>
    <u-no-network></u-no-network>
    <view-loading :loading="loadingSkeleton"></view-loading>
  </div>
</template>

<script>
import customizeTabbar from '@/components/customizeTabbar'
	import {
		loadBMap
	} from '@/utils/getUserLocation'
export default {
  name: 'Trends', // 页面名称
  components: { customizeTabbar }, // 挂载组件
  props: {}, // 组件传值
  data() {
    return {
      loadingSkeleton: false,
      current: 0, //
      tabsList: [
        { name: '推荐', type: 1 },
        { name: '附近', type: 0 },
      ], // 顶部导航
      page: 1, // 当前页数
      per_page: 10, // 每页个数
      totalPages: 0, // 总页数（防止频繁上拉刷新）
      listData: [], // 数据列表
	  platform: 0,
      contentHeight: '', // 列表滚动高度
	  latitude:0.0,
	  longitude:0.0,
    }
  },
  computed: {}, // 计算机属性 类似与data概念
  watch: {}, // 监控data中数据变化
  created() {
	  window.initBaiduMapScript = () => {
	  	console.log(BMap);
	  	this.getNowLocation()
	  }
	  loadBMap('initBaiduMapScript');
  }, // 生命周期-创建完成(可以访问当前this实例)
  mounted() {
    this.getContentHight()
  }, // 生命周期-挂载完成(可以访问DOM元素)
  methods: {
    // 页面点击事件
    handleClick(options) {
      const { type, item, query, index } = options
      switch (type) {
        case 'attention': // 点赞
          this.apiPostDmContentLikeContent(item, index)
          break
		case 'chat':
			const mid = item.userId
			const cmemberId =  uni.getStorageSync('memberId') || 0;
			if(cmemberId == mid){
				this.$toast('不能向自己发起会话')
				return;
			}else{
				this.$jump({
					name: 'chat',
					query
				})
			}
		   break
	   case 'personal': // 点赞
		const query = {
		     id:item.userId,
		 }
		 this.$jump({ name: type, query })
		 break
        default:
          this.$jump({ name: type, query })
          break
      }
    },

	getNowLocation() {
	  var that = this;
		try {
			const geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(r) {
				uni.setStorageSync('latitude', r.latitude)
				uni.setStorageSync('longitude', r.longitude)
				var city = r.address.city;
				that.$u.api.PostUpdateInfo({
					latitude:r.latitude,
					longitude:r.longitude,
					region: city,
					province: r.address.province,
					city: city,
					detailLocation: r.address.street
					
				}).then((res) => {
					console.log("获取到地址");
					console.log(res);
				})
				
				// that.apiGetFetchMemberList();
				console.log(r.address.city);
			});
		} catch (e) {
			console.log(e)
		}
	  
	},
    // 切换顶部导航栏
    handleTabsChange(index) {
      this.current = index
      this.page = 1
      this.listData = []
      this.apiGetDmContentList()
    },
    // 列表滚动到底部
    handleScroll() {
      // if (this.page < this.totalPages) {
        this.page += 1
        this.apiGetDmContentList(true)
      // }
    },
    // 点赞动态
    apiPostDmContentLikeContent(item, index) {
      const params = {
        type: item.likeFlag ? 1 : 0,
        likeType: 1,
        contentId: item.contentId,
      }
	  this.$showLoading('加载中...')
      this.$u.api.PostDmContentLikeContent(params).then((res) => {
        this.$set(this.listData[index], 'likeFlag', item.likeFlag ? 0 : 1)
        this.$set(this.listData[index], 'likeCounts', item.likeFlag ? item.likeCounts + 1 : item.likeCounts - 1)
      }).finally(() => {
		  uni.hideLoading()
		})
    },
    // 获取动态列表
    apiGetDmContentList(isRechBottom) {
		this.$showLoading('加载中...')
		const tabType = this.tabsList[this.current].type;
		if(tabType==0){
		const latitude=	uni.getStorageSync('latitude')
		const longitude=	uni.getStorageSync('longitude')
			const params = {
			  pageNum: this.page,
			  pageSize: this.per_page,
			  type: tabType,
			}
			
			this.$u.api.GetDmContentList(params).then((res) => {
			  const { data, totalPage } = res
			  data.forEach((item) => {
			    if (item.contentUrl) {
			      item.imgList = item.contentUrl.split(',')
			    }
			  })
			  if (isRechBottom) {
			    this.listData = this.listData.concat(data)
			    return
			  }
			  this.listData = data
			  // this.totalPages = Math.ceil(total / this.per_page)
			}).finally(() => {
			  uni.hideLoading()
			})
		}else{
			const params = {
			  pageNum: this.page,
			  pageSize: this.per_page,
			  type: tabType,
			}
			
			this.$u.api.GetDmContentList(params).then((res) => {
			  const { data, totalPage } = res
			  data.forEach((item) => {
			    if (item.contentUrl) {
			      item.imgList = item.contentUrl.split(',')
			    }
			  })
			  if (isRechBottom) {
			    this.listData = this.listData.concat(data)
			    return
			  }
			  this.listData = data
			  // this.totalPages = Math.ceil(total / this.per_page)
			}).finally(() => {
			  uni.hideLoading()
			})
		}
     
    },
    // 计算列表滚动高度
    getContentHight() {
      console.log('进入', document.body.clientHeight)
      console.log('进入22', document.getElementById('header').offsetHeight)
      console.log('进入33', document.getElementById('footer').offsetHeight)
      const pageHeight = document.body.clientHeight
      const pageHeaderHeight = document.getElementById('header').offsetHeight
      const pageFooterHeight = document.getElementById('footer').offsetHeight
      // this.$u.getRect('.page').then((res) => {
      //   console.log('进入page')
      //   const pageHeight = res.height
      //   this.$u.getRect('.page-header').then((res2) => {
      //     console.log('进入pagehearder')
      //     const pageHeaderHeight = res2.height
      //     this.$u.getRect('.page-footer').then((res3) => {
      //       console.log('进入pagefooter')
      //       const pageFooterHeight = res3.height
      const contentHeight = pageHeight - pageHeaderHeight - pageFooterHeight
      this.contentHeight = 'height:' + contentHeight + 'px'
      //     })
      //   })
      // })
    },
  }, // 挂载一些方法
  onLoad(options) {
	this.getNowLocation()
    this.apiGetDmContentList()
    console.log('onLoad', options, Date.now())
  }, // 生命周期回调—监听页面加载
  onShow() {}, // 生命周期回调—监听页面显示
  onReady() {}, // 生命周期回调—监听页面初次渲染完成
  onHide() {}, // 生命周期回调—监听页面隐藏
  onUnload() {}, // 生命周期回调—监听页面卸载
}
</script>

<style lang="scss" scoped>
.page {
  background-image: url('http://minio.tianhong.mobi/mall/xiaoq/home_bg.png');
  background-size: cover;
  background-repeat: no-repeat;
}
.page-header,
.page-content {
  background: transparent;
}
.top {
  padding: 30rpx 40rpx 30rpx 30rpx;
}
.tabs {
  width: 40%;
}
.send_updates_icon {
  width: 50rpx;
  height: 45rpx;
}
.item {
  align-items: flex-start;
  padding: 0 40rpx 20rpx 34rpx;
  border-bottom: 1rpx solid rgba($color: #fff, $alpha: 0.2);
}
.avatar {
  width: 95rpx;
  height: 95rpx;
  background-color: #fff;
}
.item_right {
  width: 100%;
}
.name {
  font-size: 31rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
}
.vip {
  width: 39rpx;
  height: 35rpx;
}
.tags {
  width: 140rpx;
  height: 35rpx;
  background: linear-gradient(0deg, #e2c43e, #fea700);
  border-radius: 3rpx;
  font-size: 21rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #4137ce;
}
.icon {
  width: 24rpx;
  height: 24rpx;
}
.time {
  font-size: 21rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #dcdcdc;
}
.age {
  font-size: 21rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #dcdcdc;
}
.information {
  font-size: 31rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
}
.imgs {
  width: 180rpx;
  height: 180rpx;
  border-radius: 10rpx;
  margin: 0 20rpx 20rpx 0;
}
.imgs:nth-child(3n + 3) {
  margin-right: 0;
}
.address {
  font-size: 21rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #dcdcdc;
}
.location2 {
  width: 23rpx;
  height: 25rpx;
}
.attention_icon {
  width: 40rpx;
  height: 35rpx;
}
.other {
  font-size: 25rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
}
.say_hello_icon {
  width: 35rpx;
  height: 40rpx;
}
</style>
